<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>账单</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport"
		content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1, user-scalable=no">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="../../css/rem.js"></script>
</head>



<body>
	<!--nav-->
	<div id="navbg">
		<div class="navbg">
			<div class="left">
				<image class="" src="../../src/img/nav-goback.png" v-on:click='goBack'>
				</image>
			</div>
			<div class="mid">
				<p class="mid-p">{{title}}</p>
			</div>
			<div class="right">
				<p class="right-p">
					<div style="width: 100px'"></div>
				</p>
			</div>
		</div>

		<!-- chooseBar -->
		<div id="chooseBar" class="chooseBar">
			<div class="chooseBtn" v-on:click="chooseTransType">
				<p class="text">全部交易类型</p>
				<img src="../../src/img//mx_ico_down.png" alt="">
			</div>
		</div>

		<!-- dateBar -->
		<div id="dateBar" class="dateBar">

			<div class="mounth" v-on:click="chooseMounth">
				<p>本月</p>
				<img src="../../src/img//mx_ico_down.png" alt="">
			</div>
			<div class="description">
				<p>支出¥18,234 收入¥99,131</p>
			</div>
		</div>
	</div>


	<!-- cell-list -->
	<ul id="cell-list">
		<li v-for="item in items">
			<div class="cell-bg">

				<div class="left">
					<div v-if='item.in' class="icon-in">
						<img src="../../src/img/ico_Import.png" />
					</div>
					<div v-else class="icon-out">
						<img src="../../src/img/ico_export.png" />
					</div>
					<div>
						<p class="up">{{ item.title }}</p>
						<p class="down">{{ item.transTime }}</p>
					</div>
				</div>

				<div class="right">
					<!-- <p class="up">{{ item.date }}</p> -->
					<p class="down">{{ item.money }}</p>
				</div>
			</div>
		</li>
	</ul>


	<script>


		var nav = new Vue({
			el: '#navbg',
			data: {
				title: '收支明细'
			},
			computed: {
			},
			methods: {
				goBack: function () {
					console.log('返回')
				},
				chooseTransType: function () {
					console.log('选择交易类型')
				},
				chooseMounth: function () {
					console.log('选择月份')
				}
			}
		})


		var cellList = new Vue({
			el: '#cell-list',
			data: {
				items: [
					{
						title: '全家便利店',
						transTime: '今天:10:34',
						money: '-8.98',
						in: false,
					},
					{
						title: '个人转账',
						transTime: '今天:10:34',
						money: '+1318.98',
						in: true,
					},
					{
						title: '个人转账',
						transTime: '今天:10:34',
						money: '+1318.98',
						in: true,
					},
					{
						title: '个人转账',
						transTime: '今天:10:34',
						money: '+1318.98',
						in: true,
					},
					{
						title: '个人转账',
						transTime: '今天:10:34',
						money: '+1318.98',
						in: true,
					},
					{
						title: '个人转账',
						transTime: '今天:10:34',
						money: '+1318.98',
						in: true,
					},
					{
						title: '个人转账',
						transTime: '今天:10:34',
						money: '+1318.98',
						in: true,
					},



				]
			},
			computed: {
			},
			methods: {
			}
		})




	</script>

</body>


<style>
	@import 'translist.css';

	body {
		background-color: #fff;
		padding-top: 1.64rem;
	}
</style>

</html>